<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表页面</title>
    <!--引入bootstrap-->
    <script src="../bootstrap-4.6.0-dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <!--引入jquery-->
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <!--引入layui-->
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
   <div class="layui-main">
       <div class="layui-col-md4 layui-col-md-offset8">
           <form class="form-inline">
               <div class="form-group">
                   <input type="text" class="form-control" id="query" name="query" placeholder="请输入需要搜索的字段">
               </div>
               <button type="submit" class="btn btn-info">搜索</button>
           </form>
       </div>
       <div>
           <table class="layui-table"  id="userTable" lay-filter="user">

           </table>
       </div>
       <div>

       </div>
   </div>
<script>
    layui.use('table',function () {
       var table = layui.table;
       var laytpl = layui.laytpl;
       //表格实例
        table.render({
            //确定是那个表格
            elem: '#userTable',
            //数据接口
            url: 'http://localhost:8080/user/getUserAndRoleAll',
            //开启分页
            page: true,
            //设置表格风格
            skin: 'row',
            //开启隔行背景
            even: 'true',
            //开启大表格
            size: 'lg',
            //设置表头
            cols: [[
                {field: 'uid', title: '用户ID', width:'20%',sort: true, fixed: 'left',style:'',align: 'center'},
                {field: 'username', title: '用户名', width:'20%',style:'',align: 'center'},
                 {field: 'rname', title: '角色', width:'25%',templet: function (res) {
                         var rname = ' ';
                         for (var i=0; i < res.roleList.length;i++){
                             rname += res.roleList[i].rname+' ';
                         }
                          return rname;
                     },style:'text-align: center',align: 'center'},
                 {field: 'operation', title: '操作', width:'25%',templet: '#operation',align: 'center'},
                {fieId: 'select',type: 'checkbox' ,width:"10%",align: 'center'},
            ]],
            //设置数据格式
            parseData: function (res) {
                return{
                    "msg": res.msg,
                    "code": res.status,
                    "count": res.codeSize,
                    "data": res.data
                }
            },
            //设置分页请求的请求数据
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            //设置响应数据格式
            response: {
                statusCode: 200
            }
        })
        }
    )
</script>
<script id="operation" type="text/html">

    <div class="layui-btn-container">
        <a  href="#" class="layui-btn layui-btn-primary layui-border-green">查看</a>
        <a  href="#" class="layui-btn layui-btn-primary layui-border-blue">修改</a>
        <a  href="#" class="layui-btn layui-btn-primary layui-border-red">删除</a>
    </div>
</script>
</body>
</html>